<template>
  <div class="scene">
    <canvas id="three"></canvas>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

/**
 * onMounted 钩子函数
 */
onMounted(() => {
    /**
     * 场景 scene
     */
    const scene = new THREE.Scene()
    scene.background = new THREE.Color('#00DCFF')

    /**
     * 相机 camera
     */
    const camera = new THREE.PerspectiveCamera(
      50, // 透视摄像机，垂直视野角度
      window.innerWidth / window.innerHeight, // 摄像机横纵比
      10, // 近端面
      6000 // 远端面
    )

    // 手动调整摄像机位置
    camera.position.x = 0
    camera.position.z = 1400
    camera.position.y = 320

    /**
     * 渲染器 renderer
     */
    const canvas = document.querySelector('#three') // 将 canvas 绑定到元素上
    const renderer = new THREE.WebGLRenderer({
      canvas,
      // antialias: true // 抗锯齿
    })

    renderer.render(scene, camera)

    /**
     * 导入 gltf 格式的模型
     */
    // const gltfLoader = new GLTFLoader()
    // gltfLoader.load('../static/models/scene.gltf', (gltf) => {
    //   const model = gltf.scene // 拿到 gltf 模型的主体部分
    //   scene.add(model)
    // })

    /**
     * 循环渲染每一帧
     */
    // function animate() {
    //   renderer.render(scene, camera) // 刷新渲染器
    //   requestAnimationFrame(animate)
    // }
    // animate()

    /**
     *  添加光源
     */
    // // 添加个平行光
    // const dirLight = new THREE.DirectionalLight(0xffffff, 1);
    // // 光源等位置
    // dirLight.position.set(10, 8, 5);
    // scene.add(dirLight);
    
    // // 添加个半球光
    // const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
    // hemLight.position.set(0, 100, 0);
    // scene.add(hemLight);

    /**
     * 调整设备 物理像素分辨率与 CSS 像素分辨率的比值
     */
    // function resizeRendererToDisplaySize(renderer) {
    //   const canvas = renderer.domElement;
    //   var width = window.innerWidth;
    //   var height = window.innerHeight;
    //   var canvasPixelWidth = canvas.width / window.devicePixelRatio;
    //   var canvasPixelHeight = canvas.height / window.devicePixelRatio;
    
    //   const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height
    //   if (needResize) {
    //     renderer.setSize(width, height, false)
    //   }
    //   return needResize
    // }
    
    // if (resizeRendererToDisplaySize(renderer)) {
    //   const canvas = renderer.domElement
    //   camera.aspect = canvas.clientWidth / canvas.clientHeight
    //   camera.updateProjectionMatrix()
    // }
})
</script>

<style lang="less" scoped>
    .scene {
        width: 100%;
        height: calc( 100vh - 76px );
        overflow: hidden;
        canvas {
            width: 100%;
            height: 100%;
        }
    }
</style>>